// 1、用于解析 {{ xxx }} 插值表达式和 v-model 等指令
// 2、
export default class Compile {
    constructor(el, data){
        // 根据选择器查询 node
        let node = document.querySelector(el)

        this.data = data
        this.transferNode(node)

    }

    transferNode(el) {
        // childNodes 能获取所有的节点类型（包括纯文本），children 只能获取 dom 标签节点
        let childNodes = el && Array.from(el.childNodes)
        if(childNodes && childNodes.length){
            childNodes.forEach(node => {
                this.transferNode(node) // 递归处理所有子节点

                if(this.isNodeElement(node)){ // 是 v-model 这样的指令节点，而且是标签节点
                    this.compileElement(node)
                }

                if(this.isNodeText(node)){ // 是纯文本节点
                    this.compileText(node)
                }
            })
        }
    }
    // 1. 渲染节点，解析指令，例如：v-model
    compileElement(node) {
        let attrs = node.attributes
        if(attrs && attrs.length){
            for(let attr of attrs){
                if(attr.name.indexOf('v-') > -1){
                    let attrValue = attr.nodeValue
                    node.value = this.data[attrValue]
                }
            }
        }

    }
    // 2. 渲染文本
    compileText(node) {
        // 匹配插值表达式格式：{{ xxx }}
        let reg = /\{\{(.+?)\}\}/
        let content = node.textContent
        if(reg.test(content)){
            let key = node.textContent.replaceAll(/\{|\}/g,'').trim()
            node.textContent = this.data[key]
        }

    }
    isNodeElement(node) {
        return node.nodeType === 1
    }
    isNodeText(node) {
        return node.nodeType === 3
    }
}